<template>
	<div class="update-dialog-demo">
		<div class="demo-header">
			<h1>系统更新弹窗</h1>
			<p>优雅的系统更新提示组件</p>
		</div>

		<div class="demo-content">
			<ElCard class="demo-card">
				<template #header>
					<div class="card-header">
						<span>组件演示</span>
					</div>
				</template>

				<div class="demo-buttons">
					<ElButton
						type="primary"
						size="large"
						@click="showDialog"
					>
						显示更新弹窗
					</ElButton>
					<ElButton
						size="large"
						@click="showCustomDialog"
					>
						自定义内容
					</ElButton>
				</div>

				<div class="demo-info">
					<h3>功能特点</h3>
					<ul>
						<li>✨ 精美的视觉设计，参考主流应用</li>
						<li>🎯 清晰的版本对比展示</li>
						<li>📝 详细的更新内容列表</li>
						<li>⏳ 实时更新进度显示</li>
						<li>🔒 更新过程中禁止关闭</li>
						<li>📱 完美的响应式适配</li>
					</ul>
				</div>
			</ElCard>

			<ElCard class="demo-card">
				<template #header>
					<div class="card-header">
						<span>使用方法</span>
					</div>
				</template>

				<div class="code-example">
					<h3>基础用法</h3>
					<pre><code>&lt;template&gt;
  &lt;NexUpdateDialog
    v-model="showUpdate"
    current-version="1.0.0"
    new-version="1.1.0"
    :update-content="updateList"
    @update="handleUpdate"
    @later="handleLater"
  /&gt;
&lt;/template&gt;

&lt;script setup&gt;
import NexUpdateDialog from '@/components/nex-update-dialog/index.vue'

const showUpdate = ref(false)

const updateList = [
  '优化了系统性能，运行更流畅',
  '修复了已知问题，提升稳定性',
  '新增了多项实用功能',
]

const handleUpdate = () => {
  console.log('开始更新')
  // 执行更新逻辑
}

const handleLater = () => {
  console.log('稍后提醒')
}
&lt;/script&gt;</code></pre>
				</div>

				<div class="props-table">
					<h3>Props 参数</h3>
					<table>
						<thead>
							<tr>
								<th>参数</th>
								<th>说明</th>
								<th>类型</th>
								<th>默认值</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>modelValue</td>
								<td>是否显示弹窗</td>
								<td>boolean</td>
								<td>false</td>
							</tr>
							<tr>
								<td>currentVersion</td>
								<td>当前版本号</td>
								<td>string</td>
								<td>'1.0.0'</td>
							</tr>
							<tr>
								<td>newVersion</td>
								<td>最新版本号</td>
								<td>string</td>
								<td>'1.1.0'</td>
							</tr>
							<tr>
								<td>updateContent</td>
								<td>更新内容列表</td>
								<td>string[]</td>
								<td>默认列表</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div class="events-table">
					<h3>Events 事件</h3>
					<table>
						<thead>
							<tr>
								<th>事件名</th>
								<th>说明</th>
								<th>回调参数</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>update</td>
								<td>点击立即更新时触发</td>
								<td>-</td>
							</tr>
							<tr>
								<td>later</td>
								<td>点击稍后提醒时触发</td>
								<td>-</td>
							</tr>
						</tbody>
					</table>
				</div>
			</ElCard>
		</div>
	</div>
</template>

<script setup lang="ts">
import NexUpdateDrawer from '@/components/nex-update-drawer/index.vue'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const currentVersion = ref('1.0.0')
const newVersion = ref('1.1.0')
const updateContent = ref([
	'优化了系统性能，运行更流畅',
	'修复了已知问题，提升稳定性',
	'新增了多项实用功能',
	'改进了用户界面体验',
])

const showDialog = () => {
	dialogVisible.value = true
}

const showCustomDialog = () => {
	currentVersion.value = '2.3.1'
	newVersion.value = '3.0.0'
	updateContent.value = [
		'🎉 全新的 UI 设计，更加美观',
		'⚡ 性能提升 50%，加载更快',
		'🔐 增强了安全性和隐私保护',
		'🌐 支持多语言国际化',
		'🐛 修复了 100+ 个已知问题',
	]
	dialogVisible.value = true
}

</script>

<style scoped lang="scss">
.update-dialog-demo {
	padding: 40px;
	max-width: 1200px;
	margin: 0 auto;
}

.demo-header {
	text-align: center;
	margin-bottom: 40px;

	h1 {
		font-size: 40px;
		font-weight: 600;
		color: #1d1d1f;
		margin: 0 0 16px;
	}

	p {
		font-size: 17px;
		color: #6e6e73;
		margin: 0;
	}
}

.demo-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.demo-card {
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

	:deep(.el-card__header) {
		border-bottom: 1px solid #f0f0f0;
	}
}

.card-header {
	font-size: 21px;
	font-weight: 600;
	color: #1d1d1f;
}

.demo-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	padding: 20px 0;
	flex-wrap: wrap;
}

.demo-info {
	margin-top: 32px;

	h3 {
		font-size: 17px;
		font-weight: 600;
		color: #1d1d1f;
		margin: 0 0 16px;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			padding: 8px 0;
			font-size: 14px;
			color: #6e6e73;
			line-height: 1.6;
		}
	}
}

.code-example {
	margin-bottom: 32px;

	h3 {
		font-size: 17px;
		font-weight: 600;
		color: #1d1d1f;
		margin: 0 0 16px;
	}

	pre {
		background: #f5f7fa;
		padding: 20px;
		border-radius: 12px;
		overflow-x: auto;
		margin: 0;

		code {
			font-family: 'SF Mono', 'Monaco', monospace;
			font-size: 13px;
			line-height: 1.6;
			color: #1d1d1f;
		}
	}
}

.props-table,
.events-table {
	margin-bottom: 32px;

	h3 {
		font-size: 17px;
		font-weight: 600;
		color: #1d1d1f;
		margin: 0 0 16px;
	}

	table {
		width: 100%;
		border-collapse: collapse;
		font-size: 14px;

		thead {
			background: #f5f7fa;

			th {
				padding: 12px;
				text-align: left;
				font-weight: 600;
				color: #1d1d1f;
				border-bottom: 2px solid #e0e0e0;
			}
		}

		tbody {
			tr {
				border-bottom: 1px solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}
			}

			td {
				padding: 12px;
				color: #6e6e73;

				&:first-child {
					font-family: 'SF Mono', monospace;
					color: #667eea;
				}
			}
		}
	}
}

// 响应式
@media (max-width: 768px) {
	.update-dialog-demo {
		padding: 20px;
	}

	.demo-header h1 {
		font-size: 32px;
	}

	.demo-buttons {
		flex-direction: column;

		.el-button {
			width: 100%;
		}
	}

	.props-table,
	.events-table {
		table {
			font-size: 12px;

			thead th,
			tbody td {
				padding: 8px;
			}
		}
	}
}
</style>
